<template>
    <div class="login_content">
      <div  class="login-box">
        <div class="head-box">
            <img src="../../assets/logo.png"/>
        </div>
        <el-form class="login-form" :model="formData">
            <el-form-item>
                <el-input v-model="formData.username" prefix-icon="el-icon-search"></el-input>
            </el-form-item>
            <el-form-item>
                <el-input v-model="formData.password" prefix-icon="el-icon-search"></el-input>
            </el-form-item>
            <el-form-item class="btns">
              <el-button type="primary" @click.prevent="login_in()">登录</el-button>
              <el-button type="info">重置</el-button>
            </el-form-item>
        </el-form>
      </div>
    </div>
</template>

<script>
    export default {
      data(){
        return {
          formData:{
            username:'',
            password:''
          }
        }
      },methods:{
          login_in(){
            this.$router.push({name:'home'})
            /*this.$http.post('login',this.formData).then(res =>{
              const {
                data,
                meta:{msg,status}
              } = res.data

              if (status ===200){
                //保存token
                localstorage.setItem('token',data.token);
                this.$router.push({name:'home'})
                this.$message.success(msg)
              }else {
                this.$message.warning(msg)
              }
            })*/
          }
      }
    }
</script>

<style lang="less" scoped>
.login_content{
  height:100%;
  background-color:#2d4d6d;

  .login-box{
    width: 450px;
    height:300px;
    background-color: #fff;
    border-radius: 3px;
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);

    .head-box{
      width: 130px;
      height:130px;
      border-radius: 50% ;
      padding: 10px;
      background: #eee;
      border:1px solid #eee;
      box-shadow: 0 0 10px #eee;
      position: absolute;
      left:50%;
      transform: translate(-50%,-50%);

      img{
        width: 100%;
        height:100%;
        border-radius: 50%;
        background: #fff;
      }
    }
    .login-form{
      width: 100%;
      padding: 20px;
      position: absolute;
      bottom: 0;
      box-sizing: border-box;

      .btns{
        display: flex;
        justify-content: flex-end;
      }
    }
  }
}

</style>
